Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(next/image): prefer sharp defaults, use mozjpeg for JPEG #65846

Merged
merged 1 commit into from
May 20, 2024
Merged

fix(next/image): prefer sharp defaults, use mozjpeg for JPEG #65846

merged 1 commit into from
May 20, 2024

Conversation

lovell
Copy link
Contributor

@lovell lovell commented May 16, 2024 •
edited
Loading

What?

Upgrades sharp to the latest version and relies on more of its default settings (if the default settings are unsuitable, we should consider improving these for all users in sharp itself).

  • The sequentialRead setting is now managed for you based on each input image and the operations to be applied to it.

  • The concurrency detection is more accurate than os.cpus() as it now inspects things like CPU set/affinity as well as the memory allocator.

  • The (mostly archaic) concept of chroma subsampling is not required for AVIF output. Using full chroma should improve the quality of red/orange edges, as well as slightly reducing file size as it allows greater use of AV1 chroma-from-luma prediction.

In addition, this PR also enables the use of mozjpeg features such as trellis quantisation to produce smaller file sizes. The use of mozjpeg: true infers progressive: true. This aligns JPEG output behaviour with the previously-used squoosh, which always used mozjpeg.

/cc @styfle

@ijjk
Copy link
Member

ijjk commented May 16, 2024 •
edited by styfle
Loading

Allow CI Workflow Run

  • approve CI run for commit: 8e5e8dc

Note: this should only be enabled once the PR is ready to go and can only be enabled by a maintainer

@lovell lovell force-pushed the image-optimizer-prefer-sharp-defaults branch from 670fea4 to 6405870 Compare May 16, 2024 12:38
@socket-security Socket Security
Copy link

socket-security bot commented May 16, 2024 •
edited
Loading

New and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Package New capabilities Transitives Size Publisher
npm/sharp@0.33.4 environment Transitive: filesystem, shell +8 736 kB lovell

🚮 Removed packages: npm/sharp@0.33.3

View full report↗︎

@lovell lovell marked this pull request as ready for review May 16, 2024 12:42
@lovell lovell requested review from timeyoutakeit and leerob and removed request for a team May 16, 2024 12:42
@styfle
Copy link
Member

styfle commented May 16, 2024 •
edited
Loading

if the default settings are unsuitable, we should consider improving these for all users in sharp itself

Agreed 💯

The sequentialRead setting is now managed for you based on each input image and the operations to be applied to it.

Perfect ✅

The concurrency detection is more accurate than os.cpus() as it now inspects things like CPU set/affinity as well as the memory allocator.

Can you share a link the PR that changed this behavior. I know this setting has caused lots of headaches for users, in particular OOM bugs. I also wonder if sharp would allow setting an env var to configure as an escape hatch?

The (mostly archaic) concept of chroma subsampling is not required for AVIF output. Using full chroma should improve the quality of red/orange edges, as well as slightly reducing file size as it allows greater use of AV1 chroma-from-luma prediction.

This is another one I am unsure of. I believe we saw the opposite - that the default behavior was producing large images and changing to 4:2:0 produced much smaller images and much faster. Did anything change here?

In addition, this PR also enables the use of mozjpeg features such as trellis quantisation to produce smaller file sizes.

Sounds good! Any reason that mozjpeg isn't the default behavior if its smaller file sizes?

@ijjk
Copy link
Member

ijjk commented May 16, 2024 •
edited
Loading

Tests Passed

@styfle
Copy link
Member

styfle commented May 16, 2024 •
edited
Loading

You can see the test failing: should compress avif smaller than webp at q=75

https://github.com/vercel/next.js/actions/runs/9112415147/job/25054478801?pr=65846#step:28:331

@lovell
Copy link
Contributor Author

lovell commented May 16, 2024

Can you share a link the PR that changed this behavior. I know this setting has caused lots of headaches for users, in particular OOM bugs. I also wonder if sharp would allow setting an env var to configure as an escape hatch?

Memory allocator detection was added via lovell/sharp@5a9cc83 and the CPU affinity check is a recent change via https://gitlab.gnome.org/GNOME/glib/-/merge_requests/3784 (part of glib v2.80.0, as provided by sharp v0.33.4).

Control over this is also available via the VIPS_CONCURRENCY environment variable.

I wonder if some of those OOM problems were from encoding AVIF images with older versions of libaom?

This is another one I am unsure of. I believe we saw the opposite...

The failing test is creating a WebP image at a "quality" of 75, which will be approximately equivalent (structural similarity) to a non-subsampled AVIF of "quality" of ~50, so perhaps either the test needs updating or the default AVIF quality could be lowered?

-  const avifQuality = quality - 15
+  const avifQuality = quality - 25

Any reason that mozjpeg isn't the default behavior

There is a small performance hit, nowhere near as slow as AVIF compression times though, and still faster than squoosh. Given Next.js is caching images I think it's worth using for the improved file size.

@styfle
Copy link
Member

styfle commented May 16, 2024

Memory allocator detection was added via lovell/sharp@5a9cc83

That looks like it was merged in 2021 but the PR to limit concurrency in Next.js was merged in 2023.

the CPU affinity check is a recent change via https://gitlab.gnome.org/GNOME/glib/-/merge_requests/3784 (part of glib v2.80.0, as provided by sharp v0.33.4).

This looks promising. However, isn't glib shipped in the OS and not sharp? Maybe I am misunderstanding.

or the default AVIF quality could be lowered?

That sounds reasonable if it leads to similar image size and encoding time prior to this PR 👍

@lovell lovell force-pushed the image-optimizer-prefer-sharp-defaults branch from 6405870 to 8e5e8dc Compare May 16, 2024 20:22
@ijjk ijjk added the tests label May 16, 2024
@lovell
Copy link
Contributor Author

lovell commented May 16, 2024

the PR to limit concurrency in Next.js was merged in 2023.

Thanks for all the feedback. I've reverted to keep the existing concurrency logic (development = a quarter of the available CPU cores, production = half of the available CPU cores) but updated the calculation to use the originally-detected concurrency rather than os.cpus() and therefore respect cgroup settings. (Not respecting cgroup settings would explain some of the problems that #53385 was trying to address.)

isn't glib shipped in the OS and not sharp

Both; for most people the prebuilt binaries provide this, alternatively when using a globally-installed libvips the OS/Homebrew-provided glib will be used.

I've (hopefully) fixed the failing tests and the diffs demonstrate quite nicely the reduction in file size that using mozjpeg will bring.

I decided to err on the side of caution with the avifQuality calculation so e.g. 75 maps to 55. The previously failing test cases are passing again, and the file sizes involved are:

  • WebP 75 = 2552 bytes
  • AVIF 60 / 4:2:0 = 2500 bytes
  • AVIF 55 / 4:4:4 = 2281 bytes

(The image used by these tests has rather low entropy and may not be the best demonstration of the improvements that modern codecs such as AV1 bring.)

@styfle styfle added the CI approved Approve running CI for fork label May 16, 2024
@ijjk
Copy link
Member

ijjk commented May 16, 2024 •
edited
Loading

Stats from current PR

Default Build (Increase detected ⚠️)
General
vercel/next.js canary lovell/next.js image-optimizer-prefer-sharp-defaults Change
buildDuration 16.9s 14.2s N/A
buildDurationCached 7.9s 7.4s N/A
nodeModulesSize 346 MB 346 MB N/A
nextStartRea..uration (ms) 408ms 413ms N/A
Client Bundles (main, webpack)
vercel/next.js canary lovell/next.js image-optimizer-prefer-sharp-defaults Change
2141-HASH.js gzip 33.5 kB 33.5 kB N/A
2592-HASH.js gzip 5.06 kB 5.06 kB N/A
48cf7de5-HASH.js gzip 51 kB 51 kB N/A
6539.HASH.js gzip 169 B 169 B ✓
framework-HASH.js gzip 56 kB 56 kB N/A
main-app-HASH.js gzip 220 B 222 B N/A
main-HASH.js gzip 32.3 kB 32.3 kB N/A
webpack-HASH.js gzip 1.7 kB 1.7 kB N/A
Overall change 169 B 169 B ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary lovell/next.js image-optimizer-prefer-sharp-defaults Change
polyfills-HASH.js gzip 31 kB 31 kB ✓
Overall change 31 kB 31 kB ✓
Client Pages
vercel/next.js canary lovell/next.js image-optimizer-prefer-sharp-defaults Change
_app-HASH.js gzip 193 B 193 B ✓
_error-HASH.js gzip 191 B 192 B N/A
amp-HASH.js gzip 511 B 510 B N/A
css-HASH.js gzip 341 B 341 B ✓
dynamic-HASH.js gzip 2.52 kB 2.53 kB N/A
edge-ssr-HASH.js gzip 265 B 266 B N/A
head-HASH.js gzip 363 B 365 B N/A
hooks-HASH.js gzip 392 B 392 B ✓
image-HASH.js gzip 4.27 kB 4.27 kB N/A
index-HASH.js gzip 268 B 266 B N/A
link-HASH.js gzip 2.69 kB 2.69 kB N/A
routerDirect..HASH.js gzip 328 B 326 B N/A
script-HASH.js gzip 396 B 395 B N/A
withRouter-HASH.js gzip 325 B 321 B N/A
1afbb74e6ecf..834.css gzip 106 B 106 B ✓
Overall change 1.03 kB 1.03 kB ✓
Client Build Manifests
vercel/next.js canary lovell/next.js image-optimizer-prefer-sharp-defaults Change
_buildManifest.js gzip 481 B 483 B N/A
Overall change 0 B 0 B ✓
Rendered Page Sizes
vercel/next.js canary lovell/next.js image-optimizer-prefer-sharp-defaults Change
index.html gzip 521 B 521 B ✓
link.html gzip 535 B 534 B N/A
withRouter.html gzip 516 B 518 B N/A
Overall change 521 B 521 B ✓
Edge SSR bundle Size
vercel/next.js canary lovell/next.js image-optimizer-prefer-sharp-defaults Change
edge-ssr.js gzip 121 kB 121 kB N/A
page.js gzip 179 kB 179 kB N/A
Overall change 0 B 0 B ✓
Middleware size
vercel/next.js canary lovell/next.js image-optimizer-prefer-sharp-defaults Change
middleware-b..fest.js gzip 658 B 657 B N/A
middleware-r..fest.js gzip 156 B 155 B N/A
middleware.js gzip 25.8 kB 25.8 kB N/A
edge-runtime..pack.js gzip 839 B 839 B ✓
Overall change 839 B 839 B ✓
Next Runtimes
vercel/next.js canary lovell/next.js image-optimizer-prefer-sharp-defaults Change
app-page-exp...dev.js gzip 177 kB 177 kB ✓
app-page-exp..prod.js gzip 108 kB 108 kB ✓
app-page-tur..prod.js gzip 117 kB 117 kB ✓
app-page-tur..prod.js gzip 94.6 kB 94.6 kB ✓
app-page.run...dev.js gzip 160 kB 160 kB ✓
app-page.run..prod.js gzip 93.2 kB 93.2 kB ✓
app-route-ex...dev.js gzip 21.1 kB 21.1 kB ✓
app-route-ex..prod.js gzip 15 kB 15 kB ✓
app-route-tu..prod.js gzip 15 kB 15 kB ✓
app-route-tu..prod.js gzip 14.8 kB 14.8 kB ✓
app-route.ru...dev.js gzip 20.9 kB 20.9 kB ✓
app-route.ru..prod.js gzip 14.8 kB 14.8 kB ✓
pages-api-tu..prod.js gzip 9.55 kB 9.55 kB ✓
pages-api.ru...dev.js gzip 9.82 kB 9.82 kB ✓
pages-api.ru..prod.js gzip 9.55 kB 9.55 kB ✓
pages-turbo...prod.js gzip 21.5 kB 21.5 kB ✓
pages.runtim...dev.js gzip 22 kB 22 kB ✓
pages.runtim..prod.js gzip 21.5 kB 21.5 kB ✓
server.runti..prod.js gzip 51.8 kB 51.8 kB ✓
Overall change 996 kB 996 kB ✓
build cache Overall increase ⚠️
vercel/next.js canary lovell/next.js image-optimizer-prefer-sharp-defaults Change
0.pack gzip 1.65 MB 1.65 MB N/A
index.pack gzip 126 kB 127 kB ⚠️ +1.09 kB
Overall change 126 kB 127 kB ⚠️ +1.09 kB
Diff details
Diff for page.js 
@@ -15,7 +15,7 @@
       /***/
     },
 
-    /***/ 1767: /***/ (
+    /***/ 5450: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -30,7 +30,7 @@
         default: () => /* binding */ nHandler,
       });
 
-      // NAMESPACE OBJECT: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-04b058868c-20240508_rea_x6nrtfoohwvncerarvzrfulp2u/node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2Fapp-edge-ssr%2Fpage&page=%2Fapp-edge-ssr%2Fpage&pagePath=private-next-app-dir%2Fapp-edge-ssr%2Fpage.js&appDir=%2Ftmp%2Fnext-statsi1HO0f%2Fstats-app%2Fapp&appPaths=%2Fapp-edge-ssr%2Fpage&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&basePath=&assetPrefix=&nextConfigOutput=&preferredRegion=&middlewareConfig=e30%3D!./app/app-edge-ssr/page.js?__next_edge_ssr_entry__
+      // NAMESPACE OBJECT: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-04b058868c-20240508_rea_dbavudu66yewnjanau4b4qzpou/node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2Fapp-edge-ssr%2Fpage&page=%2Fapp-edge-ssr%2Fpage&pagePath=private-next-app-dir%2Fapp-edge-ssr%2Fpage.js&appDir=%2Ftmp%2Fnext-statsi1HO0f%2Fstats-app%2Fapp&appPaths=%2Fapp-edge-ssr%2Fpage&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&basePath=&assetPrefix=&nextConfigOutput=&preferredRegion=&middlewareConfig=e30%3D!./app/app-edge-ssr/page.js?__next_edge_ssr_entry__
       var page_next_edge_ssr_entry_namespaceObject = {};
       __webpack_require__.r(page_next_edge_ssr_entry_namespaceObject);
       __webpack_require__.d(page_next_edge_ssr_entry_namespaceObject, {
@@ -68,24 +68,24 @@
         tree: () => tree,
       });
 
-      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-04b058868c-20240508_rea_x6nrtfoohwvncerarvzrfulp2u/node_modules/next/dist/esm/server/web/globals.js
-      var globals = __webpack_require__(324);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-04b058868c-20240508_rea_x6nrtfoohwvncerarvzrfulp2u/node_modules/next/dist/esm/server/web/adapter.js + 3 modules
-      var adapter = __webpack_require__(6254);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-04b058868c-20240508_rea_x6nrtfoohwvncerarvzrfulp2u/node_modules/next/dist/esm/build/webpack/loaders/next-edge-ssr-loader/render.js + 87 modules
-      var render = __webpack_require__(3204);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-04b058868c-20240508_rea_x6nrtfoohwvncerarvzrfulp2u/node_modules/next/dist/esm/server/lib/incremental-cache/index.js + 3 modules
-      var incremental_cache = __webpack_require__(6676);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-04b058868c-20240508_rea_x6nrtfoohwvncerarvzrfulp2u/node_modules/next/dist/esm/server/app-render/app-render.js + 52 modules
-      var app_render = __webpack_require__(5306);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-04b058868c-20240508_rea_x6nrtfoohwvncerarvzrfulp2u/node_modules/next/dist/esm/server/future/route-modules/app-page/module.compiled.js
-      var module_compiled = __webpack_require__(5474);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-04b058868c-20240508_rea_x6nrtfoohwvncerarvzrfulp2u/node_modules/next/dist/esm/server/future/route-kind.js
-      var route_kind = __webpack_require__(7884);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-04b058868c-20240508_rea_x6nrtfoohwvncerarvzrfulp2u/node_modules/next/dist/esm/client/components/error-boundary.js
-      var error_boundary = __webpack_require__(4280);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-04b058868c-20240508_rea_x6nrtfoohwvncerarvzrfulp2u/node_modules/next/dist/esm/server/app-render/entry-base.js + 9 modules
-      var entry_base = __webpack_require__(487); // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-04b058868c-20240508_rea_x6nrtfoohwvncerarvzrfulp2u/node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2Fapp-edge-ssr%2Fpage&page=%2Fapp-edge-ssr%2Fpage&pagePath=private-next-app-dir%2Fapp-edge-ssr%2Fpage.js&appDir=%2Ftmp%2Fnext-statsi1HO0f%2Fstats-app%2Fapp&appPaths=%2Fapp-edge-ssr%2Fpage&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&basePath=&assetPrefix=&nextConfigOutput=&preferredRegion=&middlewareConfig=e30%3D!./app/app-edge-ssr/page.js?__next_edge_ssr_entry__
+      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-04b058868c-20240508_rea_dbavudu66yewnjanau4b4qzpou/node_modules/next/dist/esm/server/web/globals.js
+      var globals = __webpack_require__(9325);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-04b058868c-20240508_rea_dbavudu66yewnjanau4b4qzpou/node_modules/next/dist/esm/server/web/adapter.js + 3 modules
+      var adapter = __webpack_require__(718);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-04b058868c-20240508_rea_dbavudu66yewnjanau4b4qzpou/node_modules/next/dist/esm/build/webpack/loaders/next-edge-ssr-loader/render.js + 87 modules
+      var render = __webpack_require__(6937);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-04b058868c-20240508_rea_dbavudu66yewnjanau4b4qzpou/node_modules/next/dist/esm/server/lib/incremental-cache/index.js + 3 modules
+      var incremental_cache = __webpack_require__(4895);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-04b058868c-20240508_rea_dbavudu66yewnjanau4b4qzpou/node_modules/next/dist/esm/server/app-render/app-render.js + 52 modules
+      var app_render = __webpack_require__(9177);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-04b058868c-20240508_rea_dbavudu66yewnjanau4b4qzpou/node_modules/next/dist/esm/server/future/route-modules/app-page/module.compiled.js
+      var module_compiled = __webpack_require__(6527);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-04b058868c-20240508_rea_dbavudu66yewnjanau4b4qzpou/node_modules/next/dist/esm/server/future/route-kind.js
+      var route_kind = __webpack_require__(6569);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-04b058868c-20240508_rea_dbavudu66yewnjanau4b4qzpou/node_modules/next/dist/esm/client/components/error-boundary.js
+      var error_boundary = __webpack_require__(1177);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-04b058868c-20240508_rea_dbavudu66yewnjanau4b4qzpou/node_modules/next/dist/esm/server/app-render/entry-base.js + 9 modules
+      var entry_base = __webpack_require__(2082); // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-04b058868c-20240508_rea_dbavudu66yewnjanau4b4qzpou/node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2Fapp-edge-ssr%2Fpage&page=%2Fapp-edge-ssr%2Fpage&pagePath=private-next-app-dir%2Fapp-edge-ssr%2Fpage.js&appDir=%2Ftmp%2Fnext-statsi1HO0f%2Fstats-app%2Fapp&appPaths=%2Fapp-edge-ssr%2Fpage&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&basePath=&assetPrefix=&nextConfigOutput=&preferredRegion=&middlewareConfig=e30%3D!./app/app-edge-ssr/page.js?__next_edge_ssr_entry__
       // We inject the tree and pages here so that we can use them in the route
       // module.
       const tree = {
@@ -102,7 +102,7 @@
                     page: [
                       () =>
                         Promise.resolve(/* import() eager */).then(
-                          __webpack_require__.bind(__webpack_require__, 7916)
+                          __webpack_require__.bind(__webpack_require__, 5885)
                         ),
                       "/tmp/next-statsi1HO0f/stats-app/app/app-edge-ssr/page.js",
                     ],
@@ -116,14 +116,14 @@
             layout: [
               () =>
                 Promise.resolve(/* import() eager */).then(
-                  __webpack_require__.bind(__webpack_require__, 129)
+                  __webpack_require__.bind(__webpack_require__, 1703)
                 ),
               "/tmp/next-statsi1HO0f/stats-app/app/layout.js",
             ],
             "not-found": [
               () =>
                 Promise.resolve(/* import() eager */).then(
-                  __webpack_require__.bind(__webpack_require__, 3205)
+                  __webpack_require__.bind(__webpack_require__, 2958)
                 ),
               "next/dist/client/components/not-found-error",
             ],
@@ -159,12 +159,12 @@
       });
 
       //# sourceMappingURL=app-page.js.map
-      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-04b058868c-20240508_rea_x6nrtfoohwvncerarvzrfulp2u/node_modules/next/dist/esm/lib/page-types.js
-      var page_types = __webpack_require__(7782);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-04b058868c-20240508_rea_x6nrtfoohwvncerarvzrfulp2u/node_modules/next/dist/esm/server/app-render/encryption-utils.js
-      var encryption_utils = __webpack_require__(6641);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-04b058868c-20240508_rea_x6nrtfoohwvncerarvzrfulp2u/node_modules/next/dist/esm/server/app-render/action-utils.js
-      var action_utils = __webpack_require__(3302); // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-04b058868c-20240508_rea_x6nrtfoohwvncerarvzrfulp2u/node_modules/next/dist/build/webpack/loaders/next-edge-ssr-loader/index.js?{"absolute500Path":"","absoluteAppPath":"next/dist/pages/_app","absoluteDocumentPath":"next/dist/pages/_document","absoluteErrorPath":"next/dist/pages/_error","absolutePagePath":"private-next-app-dir/app-edge-ssr/page.js","dev":false,"isServerComponent":true,"page":"/app-edge-ssr/page","stringifiedConfig":"eyJlbnYiOnt9LCJlc2xpbnQiOnsiaWdub3JlRHVyaW5nQnVpbGRzIjpmYWxzZX0sInR5cGVzY3JpcHQiOnsiaWdub3JlQnVpbGRFcnJvcnMiOmZhbHNlLCJ0c2NvbmZpZ1BhdGgiOiJ0c2NvbmZpZy5qc29uIn0sImRpc3REaXIiOiIubmV4dCIsImNsZWFuRGlzdERpciI6dHJ1ZSwiYXNzZXRQcmVmaXgiOiIiLCJjYWNoZU1heE1lbW9yeVNpemUiOjUyNDI4ODAwLCJjb25maWdPcmlnaW4iOiJuZXh0LmNvbmZpZy5qcyIsInVzZUZpbGVTeXN0ZW1QdWJsaWNSb3V0ZXMiOnRydWUsImdlbmVyYXRlRXRhZ3MiOnRydWUsInBhZ2VFeHRlbnNpb25zIjpbInRzeCIsInRzIiwianN4IiwianMiXSwicG93ZXJlZEJ5SGVhZGVyIjp0cnVlLCJjb21wcmVzcyI6dHJ1ZSwiaW1hZ2VzIjp7ImRldmljZVNpemVzIjpbNjQwLDc1MCw4MjgsMTA4MCwxMjAwLDE5MjAsMjA0OCwzODQwXSwiaW1hZ2VTaXplcyI6WzE2LDMyLDQ4LDY0LDk2LDEyOCwyNTYsMzg0XSwicGF0aCI6Ii9fbmV4dC9pbWFnZSIsImxvYWRlciI6ImRlZmF1bHQiLCJsb2FkZXJGaWxlIjoiIiwiZG9tYWlucyI6W10sImRpc2FibGVTdGF0aWNJbWFnZXMiOmZhbHNlLCJtaW5pbXVtQ2FjaGVUVEwiOjYwLCJmb3JtYXRzIjpbImltYWdlL3dlYnAiXSwiZGFuZ2Vyb3VzbHlBbGxvd1NWRyI6ZmFsc2UsImNvbnRlbnRTZWN1cml0eVBvbGljeSI6InNjcmlwdC1zcmMgJ25vbmUnOyBmcmFtZS1zcmMgJ25vbmUnOyBzYW5kYm94OyIsImNvbnRlbnREaXNwb3NpdGlvblR5cGUiOiJhdHRhY2htZW50IiwicmVtb3RlUGF0dGVybnMiOltdLCJ1bm9wdGltaXplZCI6ZmFsc2V9LCJkZXZJbmRpY2F0b3JzIjp7ImJ1aWxkQWN0aXZpdHkiOnRydWUsImJ1aWxkQWN0aXZpdHlQb3NpdGlvbiI6ImJvdHRvbS1yaWdodCJ9LCJvbkRlbWFuZEVudHJpZXMiOnsibWF4SW5hY3RpdmVBZ2UiOjYwMDAwLCJwYWdlc0J1ZmZlckxlbmd0aCI6NX0sImFtcCI6eyJjYW5vbmljYWxCYXNlIjoiIn0sImJhc2VQYXRoIjoiIiwic2Fzc09wdGlvbnMiOnt9LCJ0cmFpbGluZ1NsYXNoIjpmYWxzZSwiaTE4biI6bnVsbCwicHJvZHVjdGlvbkJyb3dzZXJTb3VyY2VNYXBzIjpmYWxzZSwib3B0aW1pemVGb250cyI6dHJ1ZSwiZXhjbHVkZURlZmF1bHRNb21lbnRMb2NhbGVzIjp0cnVlLCJzZXJ2ZXJSdW50aW1lQ29uZmlnIjp7fSwicHVibGljUnVudGltZUNvbmZpZyI6e30sInJlYWN0UHJvZHVjdGlvblByb2ZpbGluZyI6ZmFsc2UsInJlYWN0U3RyaWN0TW9kZSI6bnVsbCwiaHR0cEFnZW50T3B0aW9ucyI6eyJrZWVwQWxpdmUiOnRydWV9LCJzdGF0aWNQYWdlR2VuZXJhdGlvblRpbWVvdXQiOjYwLCJtb2R1bGFyaXplSW1wb3J0cyI6eyJAbXVpL2ljb25zLW1hdGVyaWFsIjp7InRyYW5zZm9ybSI6IkBtdWkvaWNvbnMtbWF0ZXJpYWwve3ttZW1iZXJ9fSJ9LCJsb2Rhc2giOnsidHJhbnNmb3JtIjoibG9kYXNoL3t7bWVtYmVyfX0ifX0sImV4cGVyaW1lbnRhbCI6eyJmbHlpbmdTaHV0dGxlIjpmYWxzZSwicHJlcmVuZGVyRWFybHlFeGl0IjpmYWxzZSwic2VydmVyTWluaWZpY2F0aW9uIjp0cnVlLCJzZXJ2ZXJTb3VyY2VNYXBzIjpmYWxzZSwibGlua05vVG91Y2hTdGFydCI6ZmFsc2UsImNhc2VTZW5zaXRpdmVSb3V0ZXMiOmZhbHNlLCJwcmVsb2FkRW50cmllc09uU3RhcnQiOnRydWUsImNsaWVudFJvdXRlckZpbHRlciI6dHJ1ZSwiY2xpZW50Um91dGVyRmlsdGVyUmVkaXJlY3RzIjpmYWxzZSwiZmV0Y2hDYWNoZUtleVByZWZpeCI6IiIsIm1pZGRsZXdhcmVQcmVmZXRjaCI6ImZsZXhpYmxlIiwib3B0aW1pc3RpY0NsaWVudENhY2hlIjp0cnVlLCJtYW51YWxDbGllbnRCYXNlUGF0aCI6ZmFsc2UsImNwdXMiOjE5LCJtZW1vcnlCYXNlZFdvcmtlcnNDb3VudCI6ZmFsc2UsImlzckZsdXNoVG9EaXNrIjp0cnVlLCJ3b3JrZXJUaHJlYWRzIjpmYWxzZSwib3B0aW1pemVDc3MiOmZhbHNlLCJuZXh0U2NyaXB0V29ya2VycyI6ZmFsc2UsInNjcm9sbFJlc3RvcmF0aW9uIjpmYWxzZSwiZXh0ZXJuYWxEaXIiOmZhbHNlLCJkaXNhYmxlT3B0aW1pemVkTG9hZGluZyI6ZmFsc2UsImd6aXBTaXplIjp0cnVlLCJjcmFDb21wYXQiOmZhbHNlLCJlc21FeHRlcm5hbHMiOnRydWUsImZ1bGx5U3BlY2lmaWVkIjpmYWxzZSwib3V0cHV0RmlsZVRyYWNpbmdSb290IjoiL3RtcC9uZXh0LXN0YXRzaTFITzBmL3N0YXRzLWFwcCIsInN3Y1RyYWNlUHJvZmlsaW5nIjpmYWxzZSwiZm9yY2VTd2NUcmFuc2Zvcm1zIjpmYWxzZSwibGFyZ2VQYWdlRGF0YUJ5dGVzIjoxMjgwMDAsImFkanVzdEZvbnRGYWxsYmFja3MiOmZhbHNlLCJhZGp1c3RGb250RmFsbGJhY2tzV2l0aFNpemVBZGp1c3QiOmZhbHNlLCJ0eXBlZFJvdXRlcyI6ZmFsc2UsImluc3RydW1lbnRhdGlvbkhvb2siOmZhbHNlLCJwYXJhbGxlbFNlcnZlckNvbXBpbGVzIjpmYWxzZSwicGFyYWxsZWxTZXJ2ZXJCdWlsZFRyYWNlcyI6ZmFsc2UsInBwciI6ZmFsc2UsIm9wdGltaXplU2VydmVyUmVhY3QiOnRydWUsInVzZUVhcmx5SW1wb3J0IjpmYWxzZSwic3RhbGVUaW1lcyI6eyJkeW5hbWljIjozMCwic3RhdGljIjozMDB9LCJvcHRpbWl6ZVBhY2thZ2VJbXBvcnRzIjpbImx1Y2lkZS1yZWFjdCIsImRhdGUtZm5zIiwibG9kYXNoLWVzIiwicmFtZGEiLCJhbnRkIiwicmVhY3QtYm9vdHN0cmFwIiwiYWhvb2tzIiwiQGFudC1kZXNpZ24vaWNvbnMiLCJAaGVhZGxlc3N1aS9yZWFjdCIsIkBoZWFkbGVzc3VpLWZsb2F0L3JlYWN0IiwiQGhlcm9pY29ucy9yZWFjdC8yMC9zb2xpZCIsIkBoZXJvaWNvbnMvcmVhY3QvMjQvc29saWQiLCJAaGVyb2ljb25zL3JlYWN0LzI0L291dGxpbmUiLCJAdmlzeC92aXN4IiwiQHRyZW1vci9yZWFjdCIsInJ4anMiLCJAbXVpL21hdGVyaWFsIiwiQG11aS9pY29ucy1tYXRlcmlhbCIsInJlY2hhcnRzIiwicmVhY3QtdXNlIiwiZWZmZWN0IiwiQGVmZmVjdC9zY2hlbWEiLCJAZWZmZWN0L3BsYXRmb3JtIiwiQGVmZmVjdC9wbGF0Zm9ybS1ub2RlIiwiQGVmZmVjdC9wbGF0Zm9ybS1icm93c2VyIiwiQGVmZmVjdC9wbGF0Zm9ybS1idW4iLCJAZWZmZWN0L3NxbCIsIkBlZmZlY3Qvc3FsLW1zc3FsIiwiQGVmZmVjdC9zcWwtbXlzcWwyIiwiQGVmZmVjdC9zcWwtcGciLCJAZWZmZWN0L3NxbC1zcXVsaXRlLW5vZGUiLCJAZWZmZWN0L3NxbC1zcXVsaXRlLWJ1biIsIkBlZmZlY3Qvc3FsLXNxdWxpdGUtd2FzbSIsIkBlZmZlY3Qvc3FsLXNxdWxpdGUtcmVhY3QtbmF0aXZlIiwiQGVmZmVjdC9ycGMiLCJAZWZmZWN0L3JwYy1odHRwIiwiQGVmZmVjdC90eXBlY2xhc3MiLCJAZWZmZWN0L2V4cGVyaW1lbnRhbCIsIkBlZmZlY3Qvb3BlbnRlbGVtZXRyeSIsIkBtYXRlcmlhbC11aS9jb3JlIiwiQG1hdGVyaWFsLXVpL2ljb25zIiwiQHRhYmxlci9pY29ucy1yZWFjdCIsIm11aS1jb3JlIiwicmVhY3QtaWNvbnMvYWkiLCJyZWFjdC1pY29ucy9iaSIsInJlYWN0LWljb25zL2JzIiwicmVhY3QtaWNvbnMvY2ciLCJyZWFjdC1pY29ucy9jaSIsInJlYWN0LWljb25zL2RpIiwicmVhY3QtaWNvbnMvZmEiLCJyZWFjdC1pY29ucy9mYTYiLCJyZWFjdC1pY29ucy9mYyIsInJlYWN0LWljb25zL2ZpIiwicmVhY3QtaWNvbnMvZ2kiLCJyZWFjdC1pY29ucy9nbyIsInJlYWN0LWljb25zL2dyIiwicmVhY3QtaWNvbnMvaGkiLCJyZWFjdC1pY29ucy9oaTIiLCJyZWFjdC1pY29ucy9pbSIsInJlYWN0LWljb25zL2lvIiwicmVhY3QtaWNvbnMvaW81IiwicmVhY3QtaWNvbnMvbGlhIiwicmVhY3QtaWNvbnMvbGliIiwicmVhY3QtaWNvbnMvbHUiLCJyZWFjdC1pY29ucy9tZCIsInJlYWN0LWljb25zL3BpIiwicmVhY3QtaWNvbnMvcmkiLCJyZWFjdC1pY29ucy9yeCIsInJlYWN0LWljb25zL3NpIiwicmVhY3QtaWNvbnMvc2wiLCJyZWFjdC1pY29ucy90YiIsInJlYWN0LWljb25zL3RmaSIsInJlYWN0LWljb25zL3RpIiwicmVhY3QtaWNvbnMvdnNjIiwicmVhY3QtaWNvbnMvd2kiXX0sImJ1bmRsZVBhZ2VzUm91dGVyRGVwZW5kZW5jaWVzIjpmYWxzZSwiY29uZmlnRmlsZSI6Ii90bXAvbmV4dC1zdGF0c2kxSE8wZi9zdGF0cy1hcHAvbmV4dC5jb25maWcuanMiLCJjb25maWdGaWxlTmFtZSI6Im5leHQuY29uZmlnLmpzIn0=","pagesType":"app","appDirLoader":"bmV4dC1hcHAtbG9hZGVyP25hbWU9YXBwJTJGYXBwLWVkZ2Utc3NyJTJGcGFnZSZwYWdlPSUyRmFwcC1lZGdlLXNzciUyRnBhZ2UmcGFnZVBhdGg9cHJpdmF0ZS1uZXh0LWFwcC1kaXIlMkZhcHAtZWRnZS1zc3IlMkZwYWdlLmpzJmFwcERpcj0lMkZ0bXAlMkZuZXh0LXN0YXRzaTFITzBmJTJGc3RhdHMtYXBwJTJGYXBwJmFwcFBhdGhzPSUyRmFwcC1lZGdlLXNzciUyRnBhZ2UmcGFnZUV4dGVuc2lvbnM9dHN4JnBhZ2VFeHRlbnNpb25zPXRzJnBhZ2VFeHRlbnNpb25zPWpzeCZwYWdlRXh0ZW5zaW9ucz1qcyZiYXNlUGF0aD0mYXNzZXRQcmVmaXg9Jm5leHRDb25maWdPdXRwdXQ9JnByZWZlcnJlZFJlZ2lvbj0mbWlkZGxld2FyZUNvbmZpZz1lMzAlM0Qh","sriEnabled":false,"middlewareConfig":"e30="}!
+      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-04b058868c-20240508_rea_dbavudu66yewnjanau4b4qzpou/node_modules/next/dist/esm/lib/page-types.js
+      var page_types = __webpack_require__(2086);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-04b058868c-20240508_rea_dbavudu66yewnjanau4b4qzpou/node_modules/next/dist/esm/server/app-render/encryption-utils.js
+      var encryption_utils = __webpack_require__(5069);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-04b058868c-20240508_rea_dbavudu66yewnjanau4b4qzpou/node_modules/next/dist/esm/server/app-render/action-utils.js
+      var action_utils = __webpack_require__(2009); // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-04b058868c-20240508_rea_dbavudu66yewnjanau4b4qzpou/node_modules/next/dist/build/webpack/loaders/next-edge-ssr-loader/index.js?{"absolute500Path":"","absoluteAppPath":"next/dist/pages/_app","absoluteDocumentPath":"next/dist/pages/_document","absoluteErrorPath":"next/dist/pages/_error","absolutePagePath":"private-next-app-dir/app-edge-ssr/page.js","dev":false,"isServerComponent":true,"page":"/app-edge-ssr/page","stringifiedConfig":"eyJlbnYiOnt9LCJlc2xpbnQiOnsiaWdub3JlRHVyaW5nQnVpbGRzIjpmYWxzZX0sInR5cGVzY3JpcHQiOnsiaWdub3JlQnVpbGRFcnJvcnMiOmZhbHNlLCJ0c2NvbmZpZ1BhdGgiOiJ0c2NvbmZpZy5qc29uIn0sImRpc3REaXIiOiIubmV4dCIsImNsZWFuRGlzdERpciI6dHJ1ZSwiYXNzZXRQcmVmaXgiOiIiLCJjYWNoZU1heE1lbW9yeVNpemUiOjUyNDI4ODAwLCJjb25maWdPcmlnaW4iOiJuZXh0LmNvbmZpZy5qcyIsInVzZUZpbGVTeXN0ZW1QdWJsaWNSb3V0ZXMiOnRydWUsImdlbmVyYXRlRXRhZ3MiOnRydWUsInBhZ2VFeHRlbnNpb25zIjpbInRzeCIsInRzIiwianN4IiwianMiXSwicG93ZXJlZEJ5SGVhZGVyIjp0cnVlLCJjb21wcmVzcyI6dHJ1ZSwiaW1hZ2VzIjp7ImRldmljZVNpemVzIjpbNjQwLDc1MCw4MjgsMTA4MCwxMjAwLDE5MjAsMjA0OCwzODQwXSwiaW1hZ2VTaXplcyI6WzE2LDMyLDQ4LDY0LDk2LDEyOCwyNTYsMzg0XSwicGF0aCI6Ii9fbmV4dC9pbWFnZSIsImxvYWRlciI6ImRlZmF1bHQiLCJsb2FkZXJGaWxlIjoiIiwiZG9tYWlucyI6W10sImRpc2FibGVTdGF0aWNJbWFnZXMiOmZhbHNlLCJtaW5pbXVtQ2FjaGVUVEwiOjYwLCJmb3JtYXRzIjpbImltYWdlL3dlYnAiXSwiZGFuZ2Vyb3VzbHlBbGxvd1NWRyI6ZmFsc2UsImNvbnRlbnRTZWN1cml0eVBvbGljeSI6InNjcmlwdC1zcmMgJ25vbmUnOyBmcmFtZS1zcmMgJ25vbmUnOyBzYW5kYm94OyIsImNvbnRlbnREaXNwb3NpdGlvblR5cGUiOiJhdHRhY2htZW50IiwicmVtb3RlUGF0dGVybnMiOltdLCJ1bm9wdGltaXplZCI6ZmFsc2V9LCJkZXZJbmRpY2F0b3JzIjp7ImJ1aWxkQWN0aXZpdHkiOnRydWUsImJ1aWxkQWN0aXZpdHlQb3NpdGlvbiI6ImJvdHRvbS1yaWdodCJ9LCJvbkRlbWFuZEVudHJpZXMiOnsibWF4SW5hY3RpdmVBZ2UiOjYwMDAwLCJwYWdlc0J1ZmZlckxlbmd0aCI6NX0sImFtcCI6eyJjYW5vbmljYWxCYXNlIjoiIn0sImJhc2VQYXRoIjoiIiwic2Fzc09wdGlvbnMiOnt9LCJ0cmFpbGluZ1NsYXNoIjpmYWxzZSwiaTE4biI6bnVsbCwicHJvZHVjdGlvbkJyb3dzZXJTb3VyY2VNYXBzIjpmYWxzZSwib3B0aW1pemVGb250cyI6dHJ1ZSwiZXhjbHVkZURlZmF1bHRNb21lbnRMb2NhbGVzIjp0cnVlLCJzZXJ2ZXJSdW50aW1lQ29uZmlnIjp7fSwicHVibGljUnVudGltZUNvbmZpZyI6e30sInJlYWN0UHJvZHVjdGlvblByb2ZpbGluZyI6ZmFsc2UsInJlYWN0U3RyaWN0TW9kZSI6bnVsbCwiaHR0cEFnZW50T3B0aW9ucyI6eyJrZWVwQWxpdmUiOnRydWV9LCJzdGF0aWNQYWdlR2VuZXJhdGlvblRpbWVvdXQiOjYwLCJtb2R1bGFyaXplSW1wb3J0cyI6eyJAbXVpL2ljb25zLW1hdGVyaWFsIjp7InRyYW5zZm9ybSI6IkBtdWkvaWNvbnMtbWF0ZXJpYWwve3ttZW1iZXJ9fSJ9LCJsb2Rhc2giOnsidHJhbnNmb3JtIjoibG9kYXNoL3t7bWVtYmVyfX0ifX0sImV4cGVyaW1lbnRhbCI6eyJmbHlpbmdTaHV0dGxlIjpmYWxzZSwicHJlcmVuZGVyRWFybHlFeGl0IjpmYWxzZSwic2VydmVyTWluaWZpY2F0aW9uIjp0cnVlLCJzZXJ2ZXJTb3VyY2VNYXBzIjpmYWxzZSwibGlua05vVG91Y2hTdGFydCI6ZmFsc2UsImNhc2VTZW5zaXRpdmVSb3V0ZXMiOmZhbHNlLCJwcmVsb2FkRW50cmllc09uU3RhcnQiOnRydWUsImNsaWVudFJvdXRlckZpbHRlciI6dHJ1ZSwiY2xpZW50Um91dGVyRmlsdGVyUmVkaXJlY3RzIjpmYWxzZSwiZmV0Y2hDYWNoZUtleVByZWZpeCI6IiIsIm1pZGRsZXdhcmVQcmVmZXRjaCI6ImZsZXhpYmxlIiwib3B0aW1pc3RpY0NsaWVudENhY2hlIjp0cnVlLCJtYW51YWxDbGllbnRCYXNlUGF0aCI6ZmFsc2UsImNwdXMiOjE5LCJtZW1vcnlCYXNlZFdvcmtlcnNDb3VudCI6ZmFsc2UsImlzckZsdXNoVG9EaXNrIjp0cnVlLCJ3b3JrZXJUaHJlYWRzIjpmYWxzZSwib3B0aW1pemVDc3MiOmZhbHNlLCJuZXh0U2NyaXB0V29ya2VycyI6ZmFsc2UsInNjcm9sbFJlc3RvcmF0aW9uIjpmYWxzZSwiZXh0ZXJuYWxEaXIiOmZhbHNlLCJkaXNhYmxlT3B0aW1pemVkTG9hZGluZyI6ZmFsc2UsImd6aXBTaXplIjp0cnVlLCJjcmFDb21wYXQiOmZhbHNlLCJlc21FeHRlcm5hbHMiOnRydWUsImZ1bGx5U3BlY2lmaWVkIjpmYWxzZSwib3V0cHV0RmlsZVRyYWNpbmdSb290IjoiL3RtcC9uZXh0LXN0YXRzaTFITzBmL3N0YXRzLWFwcCIsInN3Y1RyYWNlUHJvZmlsaW5nIjpmYWxzZSwiZm9yY2VTd2NUcmFuc2Zvcm1zIjpmYWxzZSwibGFyZ2VQYWdlRGF0YUJ5dGVzIjoxMjgwMDAsImFkanVzdEZvbnRGYWxsYmFja3MiOmZhbHNlLCJhZGp1c3RGb250RmFsbGJhY2tzV2l0aFNpemVBZGp1c3QiOmZhbHNlLCJ0eXBlZFJvdXRlcyI6ZmFsc2UsImluc3RydW1lbnRhdGlvbkhvb2siOmZhbHNlLCJwYXJhbGxlbFNlcnZlckNvbXBpbGVzIjpmYWxzZSwicGFyYWxsZWxTZXJ2ZXJCdWlsZFRyYWNlcyI6ZmFsc2UsInBwciI6ZmFsc2UsIm9wdGltaXplU2VydmVyUmVhY3QiOnRydWUsInVzZUVhcmx5SW1wb3J0IjpmYWxzZSwic3RhbGVUaW1lcyI6eyJkeW5hbWljIjozMCwic3RhdGljIjozMDB9LCJvcHRpbWl6ZVBhY2thZ2VJbXBvcnRzIjpbImx1Y2lkZS1yZWFjdCIsImRhdGUtZm5zIiwibG9kYXNoLWVzIiwicmFtZGEiLCJhbnRkIiwicmVhY3QtYm9vdHN0cmFwIiwiYWhvb2tzIiwiQGFudC1kZXNpZ24vaWNvbnMiLCJAaGVhZGxlc3N1aS9yZWFjdCIsIkBoZWFkbGVzc3VpLWZsb2F0L3JlYWN0IiwiQGhlcm9pY29ucy9yZWFjdC8yMC9zb2xpZCIsIkBoZXJvaWNvbnMvcmVhY3QvMjQvc29saWQiLCJAaGVyb2ljb25zL3JlYWN0LzI0L291dGxpbmUiLCJAdmlzeC92aXN4IiwiQHRyZW1vci9yZWFjdCIsInJ4anMiLCJAbXVpL21hdGVyaWFsIiwiQG11aS9pY29ucy1tYXRlcmlhbCIsInJlY2hhcnRzIiwicmVhY3QtdXNlIiwiZWZmZWN0IiwiQGVmZmVjdC9zY2hlbWEiLCJAZWZmZWN0L3BsYXRmb3JtIiwiQGVmZmVjdC9wbGF0Zm9ybS1ub2RlIiwiQGVmZmVjdC9wbGF0Zm9ybS1icm93c2VyIiwiQGVmZmVjdC9wbGF0Zm9ybS1idW4iLCJAZWZmZWN0L3NxbCIsIkBlZmZlY3Qvc3FsLW1zc3FsIiwiQGVmZmVjdC9zcWwtbXlzcWwyIiwiQGVmZmVjdC9zcWwtcGciLCJAZWZmZWN0L3NxbC1zcXVsaXRlLW5vZGUiLCJAZWZmZWN0L3NxbC1zcXVsaXRlLWJ1biIsIkBlZmZlY3Qvc3FsLXNxdWxpdGUtd2FzbSIsIkBlZmZlY3Qvc3FsLXNxdWxpdGUtcmVhY3QtbmF0aXZlIiwiQGVmZmVjdC9ycGMiLCJAZWZmZWN0L3JwYy1odHRwIiwiQGVmZmVjdC90eXBlY2xhc3MiLCJAZWZmZWN0L2V4cGVyaW1lbnRhbCIsIkBlZmZlY3Qvb3BlbnRlbGVtZXRyeSIsIkBtYXRlcmlhbC11aS9jb3JlIiwiQG1hdGVyaWFsLXVpL2ljb25zIiwiQHRhYmxlci9pY29ucy1yZWFjdCIsIm11aS1jb3JlIiwicmVhY3QtaWNvbnMvYWkiLCJyZWFjdC1pY29ucy9iaSIsInJlYWN0LWljb25zL2JzIiwicmVhY3QtaWNvbnMvY2ciLCJyZWFjdC1pY29ucy9jaSIsInJlYWN0LWljb25zL2RpIiwicmVhY3QtaWNvbnMvZmEiLCJyZWFjdC1pY29ucy9mYTYiLCJyZWFjdC1pY29ucy9mYyIsInJlYWN0LWljb25zL2ZpIiwicmVhY3QtaWNvbnMvZ2kiLCJyZWFjdC1pY29ucy9nbyIsInJlYWN0LWljb25zL2dyIiwicmVhY3QtaWNvbnMvaGkiLCJyZWFjdC1pY29ucy9oaTIiLCJyZWFjdC1pY29ucy9pbSIsInJlYWN0LWljb25zL2lvIiwicmVhY3QtaWNvbnMvaW81IiwicmVhY3QtaWNvbnMvbGlhIiwicmVhY3QtaWNvbnMvbGliIiwicmVhY3QtaWNvbnMvbHUiLCJyZWFjdC1pY29ucy9tZCIsInJlYWN0LWljb25zL3BpIiwicmVhY3QtaWNvbnMvcmkiLCJyZWFjdC1pY29ucy9yeCIsInJlYWN0LWljb25zL3NpIiwicmVhY3QtaWNvbnMvc2wiLCJyZWFjdC1pY29ucy90YiIsInJlYWN0LWljb25zL3RmaSIsInJlYWN0LWljb25zL3RpIiwicmVhY3QtaWNvbnMvdnNjIiwicmVhY3QtaWNvbnMvd2kiXX0sImJ1bmRsZVBhZ2VzUm91dGVyRGVwZW5kZW5jaWVzIjpmYWxzZSwiY29uZmlnRmlsZSI6Ii90bXAvbmV4dC1zdGF0c2kxSE8wZi9zdGF0cy1hcHAvbmV4dC5jb25maWcuanMiLCJjb25maWdGaWxlTmFtZSI6Im5leHQuY29uZmlnLmpzIn0=","pagesType":"app","appDirLoader":"bmV4dC1hcHAtbG9hZGVyP25hbWU9YXBwJTJGYXBwLWVkZ2Utc3NyJTJGcGFnZSZwYWdlPSUyRmFwcC1lZGdlLXNzciUyRnBhZ2UmcGFnZVBhdGg9cHJpdmF0ZS1uZXh0LWFwcC1kaXIlMkZhcHAtZWRnZS1zc3IlMkZwYWdlLmpzJmFwcERpcj0lMkZ0bXAlMkZuZXh0LXN0YXRzaTFITzBmJTJGc3RhdHMtYXBwJTJGYXBwJmFwcFBhdGhzPSUyRmFwcC1lZGdlLXNzciUyRnBhZ2UmcGFnZUV4dGVuc2lvbnM9dHN4JnBhZ2VFeHRlbnNpb25zPXRzJnBhZ2VFeHRlbnNpb25zPWpzeCZwYWdlRXh0ZW5zaW9ucz1qcyZiYXNlUGF0aD0mYXNzZXRQcmVmaXg9Jm5leHRDb25maWdPdXRwdXQ9JnByZWZlcnJlZFJlZ2lvbj0mbWlkZGxld2FyZUNvbmZpZz1lMzAlM0Qh","sriEnabled":false,"middlewareConfig":"e30="}!
       var _self___RSC_MANIFEST;
 
       const incrementalCacheHandler = null;
@@ -421,47 +421,47 @@
       /***/
     },
 
-    /***/ 7926: /***/ (
+    /***/ 4699: /***/ (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
     ) => {
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.bind(__webpack_require__, 4935)
+        __webpack_require__.bind(__webpack_require__, 1378)
       );
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.bind(__webpack_require__, 552)
+        __webpack_require__.bind(__webpack_require__, 2527)
       );
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.bind(__webpack_require__, 966)
+        __webpack_require__.bind(__webpack_require__, 961)
       );
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.bind(__webpack_require__, 6813)
+        __webpack_require__.bind(__webpack_require__, 1667)
       );
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.bind(__webpack_require__, 5371)
+        __webpack_require__.bind(__webpack_require__, 3963)
       );
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.bind(__webpack_require__, 4430)
+        __webpack_require__.bind(__webpack_require__, 1399)
       );
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.bind(__webpack_require__, 934)
+        __webpack_require__.bind(__webpack_require__, 8559)
       );
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.bind(__webpack_require__, 6248)
+        __webpack_require__.bind(__webpack_require__, 6180)
       );
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.bind(__webpack_require__, 2038)
+        __webpack_require__.bind(__webpack_require__, 5413)
       );
 
       /***/
     },
 
-    /***/ 7799: /***/ () => {
+    /***/ 7698: /***/ () => {
       /***/
     },
 
-    /***/ 7916: /***/ (
+    /***/ 5885: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -481,7 +481,7 @@
       /***/
     },
 
-    /***/ 129: /***/ (
+    /***/ 1703: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -493,7 +493,7 @@
         /* harmony export */
       });
       /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ =
-        __webpack_require__(5433);
+        __webpack_require__(982);
 
       function RootLayout({ children }) {
         return /*#__PURE__*/ (0,
@@ -512,7 +512,7 @@
     // webpackRuntimeModules
     /******/ var __webpack_exec__ = (moduleId) =>
       __webpack_require__((__webpack_require__.s = moduleId));
-    /******/ __webpack_require__.O(0, [636, 450], () => __webpack_exec__(1767));
+    /******/ __webpack_require__.O(0, [781, 429], () => __webpack_exec__(5450));
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ (_ENTRIES = typeof _ENTRIES === "undefined" ? {} : _ENTRIES)[
       "middleware_app/app-edge-ssr/page"
Diff for middleware.js

Diff too large to display

Diff for edge-ssr.js

Diff too large to display

Diff for image-HASH.js 
@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [8358],
   {
-    /***/ 5498: /***/ (
+    /***/ 8536: /***/ (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/image",
         function () {
-          return __webpack_require__(8082);
+          return __webpack_require__(3672);
         },
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 771: /***/ (module, exports, __webpack_require__) => {
+    /***/ 400: /***/ (module, exports, __webpack_require__) => {
       "use strict";
       /* __next_internal_client_entry_do_not_use__  cjs */
       Object.defineProperty(exports, "__esModule", {
@@ -40,15 +40,15 @@
         __webpack_require__(5614)
       );
       const _head = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(1549)
+        __webpack_require__(2537)
       );
-      const _getimgprops = __webpack_require__(6472);
-      const _imageconfig = __webpack_require__(6915);
-      const _imageconfigcontextsharedruntime = __webpack_require__(3993);
-      const _warnonce = __webpack_require__(3260);
-      const _routercontextsharedruntime = __webpack_require__(4781);
+      const _getimgprops = __webpack_require__(4031);
+      const _imageconfig = __webpack_require__(8267);
+      const _imageconfigcontextsharedruntime = __webpack_require__(6469);
+      const _warnonce = __webpack_require__(5240);
+      const _routercontextsharedruntime = __webpack_require__(5635);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(933)
+        __webpack_require__(271)
       );
       // This is replaced by webpack define plugin
       const configEnv = {
@@ -376,7 +376,7 @@
       /***/
     },
 
-    /***/ 6472: /***/ (
+    /***/ 4031: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -392,9 +392,9 @@
           return getImgProps;
         },
       });
-      const _warnonce = __webpack_require__(3260);
-      const _imageblursvg = __webpack_require__(7851);
-      const _imageconfig = __webpack_require__(6915);
+      const _warnonce = __webpack_require__(5240);
+      const _imageblursvg = __webpack_require__(2682);
+      const _imageconfig = __webpack_require__(8267);
       const VALID_LOADING_VALUES =
         /* unused pure expression or super */ null && [
           "lazy",
@@ -769,7 +769,7 @@
       /***/
     },
 
-    /***/ 7851: /***/ (__unused_webpack_module, exports) => {
+    /***/ 2682: /***/ (__unused_webpack_module, exports) => {
       "use strict";
       /**
        * A shared function, used on both client and server, to generate a SVG blur placeholder.
@@ -824,7 +824,7 @@
       /***/
     },
 
-    /***/ 4770: /***/ (
+    /***/ 3669: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -851,10 +851,10 @@
         },
       });
       const _interop_require_default = __webpack_require__(1478);
-      const _getimgprops = __webpack_require__(6472);
-      const _imagecomponent = __webpack_require__(771);
+      const _getimgprops = __webpack_require__(4031);
+      const _imagecomponent = __webpack_require__(400);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(933)
+        __webpack_require__(271)
       );
       function getImageProps(imgProps) {
         const { props } = (0, _getimgprops.getImgProps)(imgProps, {
@@ -886,7 +886,7 @@
       /***/
     },
 
-    /***/ 933: /***/ (__unused_webpack_module, exports) => {
+    /***/ 271: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -921,7 +921,7 @@
       /***/
     },
 
-    /***/ 8082: /***/ (
+    /***/ 3672: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -938,8 +938,8 @@
 
       // EXTERNAL MODULE: ./node_modules/.pnpm/react@19.0.0-beta-04b058868c-20240508/node_modules/react/jsx-runtime.js
       var jsx_runtime = __webpack_require__(1847);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-04b058868c-20240508_rea_x6nrtfoohwvncerarvzrfulp2u/node_modules/next/image.js
-      var next_image = __webpack_require__(5945);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-04b058868c-20240508_rea_dbavudu66yewnjanau4b4qzpou/node_modules/next/image.js
+      var next_image = __webpack_require__(7037);
       var image_default = /*#__PURE__*/ __webpack_require__.n(next_image); // CONCATENATED MODULE: ./pages/nextjs.png
       /* harmony default export */ const nextjs = {
         src: "/_next/static/media/nextjs.cae0b805.png",
@@ -969,12 +969,12 @@
       /***/
     },
 
-    /***/ 5945: /***/ (
+    /***/ 7037: /***/ (
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) => {
-      module.exports = __webpack_require__(4770);
+      module.exports = __webpack_require__(3669);
 
       /***/
     },
@@ -984,7 +984,7 @@
     /******/ var __webpack_exec__ = (moduleId) =>
       __webpack_require__((__webpack_require__.s = moduleId));
     /******/ __webpack_require__.O(0, [2888, 9774, 179], () =>
-      __webpack_exec__(5498)
+      __webpack_exec__(8536)
     );
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Diff for main-HASH.js

Diff too large to display

Commit: e531a96

@styfle
Copy link
Member

styfle commented May 16, 2024

Thanks for all the feedback

Thank you for the PR!

updated the calculation to use the originally-detected concurrency rather than os.cpus() and therefore respect cgroup settings

Sounds good to me, thanks!

for most people the prebuilt binaries provide this,

Got it, I think the vast majority of users are going to be using prebuilt binaries given how slow building from source is.

I've (hopefully) fixed the failing tests and the diffs demonstrate quite nicely the reduction in file size that using mozjpeg will bring.

Ah yes, I was wondering why placeholders got larger when removing squoosh in PR #63321
This would explain it 😄

I decided to err on the side of caution with the avifQuality calculation so e.g. 75 maps to 55

If I remember correctly, higher quality is slower to encode and results in larger file sizes. This is a tricky one to get right because we don't want to slow things down too much but we also don't want to make the image look bad. So it sounds like the "err on the side of caution" in this case is ensuring the image doesn't look bad, is that correct?

The image used by these tests has rather low entropy and may not be the best demonstration of the improvements that modern codecs such as AV1 bring.

Indeed, we don't have a very good dataset of images in the test suite. Probably because something like quality is subjective and hard to test automatically.

@lovell lovell force-pushed the image-optimizer-prefer-sharp-defaults branch from 8e5e8dc to 725b4b0 Compare May 17, 2024 09:18
@lovell
Copy link
Contributor Author

lovell commented May 17, 2024

So it sounds like the "err on the side of caution" in this case is ensuring the image doesn't look bad, is that correct?

Yes, here are the DSSIM values (lower is better) when compared with a lossless PNG version of the same 399x271 test image:

WebP 75 = 0.00172165
AVIF 50 = 0.00188916
AVIF 51 = 0.00175730
AVIF 52 = 0.00155333
AVIF 55 = 0.00130863

For the given image, a WebP "quality" of 75 is structurally equivalent to an AVIF "quality" between 51 and 52, so my original guesstimate of 50 wasn't that far off (I've clearly spent too long in this game) and using 55 provides a margin of safety.

(There are still some failing tests that I'm unsure are related to this change as they also appear to fail on the canary branch.)

@styfle
Copy link
Member

styfle commented May 17, 2024

Wonderful thanks!

Those CI failures look unrelated to your PR so I'll rerun now and see if they pass.

(this repo is under really heavy development the past few weeks 😄)

@lovell
fix(next/image): prefer sharp defaults, use mozjpeg for JPEG
e531a96 
- Upgrades sharp to latest v0.33.4

- Use default concurrency detection instead of os.cpus() as it
inspects things like CPU set/affinity as well as the memory
allocator.

- Prevents use of chroma subsampling for AVIF output, instead
slightly reducing relative quality. This should improve the
appearance of red/orange edges and reduce file size as AV1
chroma-from-luma prediction will work better.

- There's no need to set sequentialRead as sharp now manages this
for each input image and the operations in the pipeline.

- Defaults JPEG output to use mozjpeg features such as trellis
quantisation as these produce smaller file sizes. This should
produce consistent output with squoosh at the same quality.
@lovell lovell force-pushed the image-optimizer-prefer-sharp-defaults branch from a11e4a0 to e531a96 Compare May 18, 2024 09:28
@styfle styfle merged commit dd8ee52 into vercel:canary May 20, 2024
75 checks passed
@lovell lovell deleted the image-optimizer-prefer-sharp-defaults branch May 20, 2024 15:54
@github-actions github-actions bot added the locked label Jun 5, 2024
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Jun 5, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@styfle styfle styfle approved these changes

@timneutkens timneutkens Awaiting requested review from timneutkens

@ijjk ijjk Awaiting requested review from ijjk

@shuding shuding Awaiting requested review from shuding

@huozhi huozhi Awaiting requested review from huozhi

@ztanner ztanner Awaiting requested review from ztanner

@feedthejim feedthejim Awaiting requested review from feedthejim

@wyattjoh wyattjoh Awaiting requested review from wyattjoh

@timeyoutakeit timeyoutakeit Awaiting requested review from timeyoutakeit timeyoutakeit was automatically assigned from vercel/devex

@leerob leerob Awaiting requested review from leerob leerob was automatically assigned from vercel/devex

Assignees
No one assigned
Labels
CI approved Approve running CI for fork locked tests type: next
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@lovell @ijjk @styfle